<template>
  <view class="member-management-page">
    <!-- 导航栏 -->
    <view class="navbar">
      <image 
        class="icon-image" 
        src="/static/icons/arrow-left.svg" 
        mode="aspectFit" 
        @click="goBack"
      />
      <text class="navbar-title">组员管理</text>
      <view class="navbar-right">
        <image 
          class="icon-image" 
          src="/static/icons/plus.svg" 
          mode="aspectFit" 
          @click="showAddMember"
        />
      </view>
    </view>

    <!-- 统计数据区域 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{ statsData.totalMembers }}</text>
          <text class="stat-label">总组员</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.activeMembers }}</text>
          <text class="stat-label">活跃组员</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.disabledMembers }}</text>
          <text class="stat-label">禁用组员</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.onlineMembers }}</text>
          <text class="stat-label">在线组员</text>
        </view>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">状态:</text>
          <picker 
            :value="selectedStatusIndex" 
            :range="statusList" 
            range-key="name"
            @change="onStatusChange"
          >
            <view class="picker-display">
              <text>{{ selectedStatus.name || '全部状态' }}</text>
              <image class="icon-image-small" src="/static/icons/chevron-down.svg" mode="aspectFit" />
            </view>
          </picker>
        </view>
        
        <view class="filter-item">
          <text class="filter-label">角色:</text>
          <picker 
            :value="selectedRoleIndex" 
            :range="roleList" 
            range-key="name"
            @change="onRoleChange"
          >
            <view class="picker-display">
              <text>{{ selectedRole.name || '全部角色' }}</text>
              <image class="icon-image-small" src="/static/icons/chevron-down.svg" mode="aspectFit" />
            </view>
          </picker>
        </view>
      </view>
      
      <view class="search-row">
        <view class="search-input">
          <up-input 
            v-model="searchKeyword" 
            placeholder="搜索组员姓名、手机号或工号" 
            @input="onSearchInput"
            suffix-icon="/static/icons/search.svg"
          />
        </view>
        <up-button class="refresh-btn" @click="refreshData">
          <image class="icon-image-medium" src="/static/icons/refresh-icon.svg" mode="aspectFit" />
        </up-button>
      </view>
    </view>

    <!-- 组员列表 -->
    <view class="content-section">
      <scroll-view class="content-scroll" scroll-y>
        <view class="member-list">
          <view 
            v-for="member in filteredMembers" 
            :key="member.id"
            class="member-item"
            @click="showMemberDetail(member)"
          >
            <view class="member-content">
              <view class="member-avatar">
                <image 
                  :src="member.avatar || '/static/images/default-avatar.png'" 
                  mode="aspectFill"
                />
                <view 
                  class="online-status"
                  :class="{ online: member.isOnline }"
                ></view>
              </view>
              
              <view class="member-info">
                <view class="member-name-row">
                  <text class="member-name">{{ member.name }}</text>
                  <view 
                    class="status-badge"
                    :class="getMemberStatusClass(member.status)"
                  >
                    {{ getMemberStatusText(member.status) }}
                  </view>
                </view>
                <view class="member-details">
                  <text class="member-role">{{ member.roleName }}</text>
                  <text class="member-phone">{{ member.phone }}</text>
                </view>
                <view class="member-extra">
                  <text class="member-id">工号: {{ member.employeeId }}</text>
                  <text class="member-join-date">入职: {{ member.joinDate }}</text>
                </view>
              </view>
            </view>
            
            <view class="member-actions">
              <up-button 
                class="action-btn reset-btn"
                @click.stop="showResetPasswordConfirm(member)"
                :disabled="member.status === 'disabled'"
              >
                <image class="icon-image-small" src="/static/icons/key.svg" mode="aspectFit" />
                <text>重置密码</text>
              </up-button>
              <up-button 
                class="action-btn toggle-btn"
                :class="{ disable: member.status === 'active' }"
                @click.stop="showToggleStatusConfirm(member)"
              >
                <image 
                  class="icon-image-small" 
                  :src="member.status === 'active' ? '/static/icons/user-x.svg' : '/static/icons/user-check.svg'" 
                  mode="aspectFit" 
                />
                <text>{{ member.status === 'active' ? '禁用' : '启用' }}</text>
              </up-button>
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="filteredMembers.length === 0" class="empty-state">
          <image class="empty-icon" src="/static/icons/users.svg" mode="aspectFit" />
          <text class="empty-text">暂无组员数据</text>
          <text class="empty-desc">请检查筛选条件或添加新组员</text>
        </view>
      </scroll-view>
    </view>

    <!-- 组员详情弹窗 -->
    <u-popup v-model="showMemberDetailModal" mode="bottom" height="70%">
      <view class="member-detail">
        <view class="detail-header">
          <text class="detail-title">组员详情</text>
          <image 
            class="icon-image" 
            src="/static/icons/x.svg" 
            mode="aspectFit" 
            @click="closeMemberDetail"
          />
        </view>
        
        <view v-if="selectedMember" class="detail-content">
          <view class="member-profile">
            <view class="profile-avatar">
              <image 
                :src="selectedMember.avatar || '/static/images/default-avatar.png'" 
                mode="aspectFill"
              />
              <view 
                class="online-status large"
                :class="{ online: selectedMember.isOnline }"
              ></view>
            </view>
            <view class="profile-info">
              <text class="profile-name">{{ selectedMember.name }}</text>
              <text class="profile-role">{{ selectedMember.roleName }}</text>
              <view 
                class="status-badge"
                :class="getMemberStatusClass(selectedMember.status)"
              >
                {{ getMemberStatusText(selectedMember.status) }}
              </view>
            </view>
          </view>
          
          <view class="detail-sections">
            <view class="detail-section">
              <text class="section-title">基本信息</text>
              <view class="detail-item">
                <text class="detail-label">工号:</text>
                <text class="detail-value">{{ selectedMember.employeeId }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">手机号:</text>
                <text class="detail-value">{{ selectedMember.phone }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">邮箱:</text>
                <text class="detail-value">{{ selectedMember.email || '未设置' }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">入职日期:</text>
                <text class="detail-value">{{ selectedMember.joinDate }}</text>
              </view>
            </view>
            
            <view class="detail-section">
              <text class="section-title">工作信息</text>
              <view class="detail-item">
                <text class="detail-label">所属角色:</text>
                <text class="detail-value">{{ selectedMember.roleName }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">负责区域:</text>
                <text class="detail-value">{{ selectedMember.workArea || '未分配' }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">当前班次:</text>
                <text class="detail-value">{{ selectedMember.currentShift || '未排班' }}</text>
              </view>
            </view>
            
            <view class="detail-section">
              <text class="section-title">账户状态</text>
              <view class="detail-item">
                <text class="detail-label">在线状态:</text>
                <text class="detail-value" :class="{ online: selectedMember.isOnline }">
                  {{ selectedMember.isOnline ? '在线' : '离线' }}
                </text>
              </view>
              <view class="detail-item">
                <text class="detail-label">最后登录:</text>
                <text class="detail-value">{{ selectedMember.lastLoginTime || '从未登录' }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">创建时间:</text>
                <text class="detail-value">{{ selectedMember.createTime }}</text>
              </view>
            </view>
          </view>
          
          <view class="detail-actions">
            <up-button 
              class="detail-action-btn reset-btn"
              @click="showResetPasswordConfirm(selectedMember)"
              :disabled="selectedMember.status === 'disabled'"
            >
              <image class="icon-image-small" src="/static/icons/key.svg" mode="aspectFit" />
              <text>重置密码</text>
            </up-button>
            <up-button 
              class="detail-action-btn toggle-btn"
              :class="{ disable: selectedMember.status === 'active' }"
              @click="showToggleStatusConfirm(selectedMember)"
            >
              <image 
                class="icon-image-small" 
                :src="selectedMember.status === 'active' ? '/static/icons/user-x.svg' : '/static/icons/user-check.svg'" 
                mode="aspectFit" 
              />
              <text>{{ selectedMember.status === 'active' ? '禁用账户' : '启用账户' }}</text>
            </up-button>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 重置密码确认弹窗 -->
    <u-modal 
      v-model="showResetPasswordModal" 
      title="重置密码确认"
      :show-cancel-button="true"
      @confirm="confirmResetPassword"
      @cancel="cancelResetPassword"
    >
      <view class="modal-content">
        <text class="modal-text">确定要重置 <text class="highlight">{{ resetPasswordMember?.name }}</text> 的密码吗？</text>
        <text class="modal-desc">重置后的密码将通过短信发送给该组员</text>
      </view>
    </u-modal>

    <!-- 禁用/启用确认弹窗 -->
    <u-modal 
      v-model="showToggleStatusModal" 
      :title="toggleStatusMember?.status === 'active' ? '禁用账户确认' : '启用账户确认'"
      :show-cancel-button="true"
      @confirm="confirmToggleStatus"
      @cancel="cancelToggleStatus"
    >
      <view class="modal-content">
        <text class="modal-text">
          确定要{{ toggleStatusMember?.status === 'active' ? '禁用' : '启用' }} 
          <text class="highlight">{{ toggleStatusMember?.name }}</text> 的账户吗？
        </text>
        <text class="modal-desc">
          {{ toggleStatusMember?.status === 'active' ? '禁用后该组员将无法登录系统' : '启用后该组员可以正常使用系统' }}
        </text>
      </view>
    </u-modal>

    <!-- 添加组员弹窗 -->
    <u-popup v-model="showAddMemberModal" mode="bottom" height="80%">
      <view class="add-member">
        <view class="add-header">
          <text class="add-title">添加组员</text>
          <image 
            class="icon-image" 
            src="/static/icons/x.svg" 
            mode="aspectFit" 
            @click="closeAddMember"
          />
        </view>
        
        <view class="add-form">
          <view class="form-item">
            <text class="form-label">姓名 *</text>
            <input v-model="newMember.name" placeholder="请输入姓名" class="form-input" />
          </view>
          
          <view class="form-item">
            <text class="form-label">手机号 *</text>
            <input v-model="newMember.phone" placeholder="请输入手机号" class="form-input" type="number" />
          </view>
          
          <view class="form-item">
            <text class="form-label">工号 *</text>
            <input v-model="newMember.employeeId" placeholder="请输入工号" class="form-input" />
          </view>
          
          <view class="form-item">
            <text class="form-label">角色 *</text>
            <picker 
              :value="newMemberRoleIndex" 
              :range="roleList.filter(r => r.id !== 'all')" 
              range-key="name"
              @change="onNewMemberRoleChange"
            >
              <view class="form-picker">
                <text>{{ newMember.roleName || '请选择角色' }}</text>
                <image class="icon-image-small" src="/static/icons/chevron-down.svg" mode="aspectFit" />
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <text class="form-label">邮箱</text>
            <input v-model="newMember.email" placeholder="请输入邮箱" class="form-input" />
          </view>
          
          <view class="form-item">
            <text class="form-label">工作区域</text>
            <input v-model="newMember.workArea" placeholder="请输入工作区域" class="form-input" />
          </view>
        </view>
        
        <view class="add-actions">
          <up-button class="add-cancel-btn" @click="closeAddMember">取消</up-button>
          <up-button class="add-confirm-btn" @click="confirmAddMember" :disabled="!canAddMember">确认添加</up-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'MemberManagementPage',
  data() {
    return {
      // 统计数据
      statsData: {
        totalMembers: 0,
        activeMembers: 0,
        disabledMembers: 0,
        onlineMembers: 0
      },
      
      // 筛选数据
      statusList: [
        { id: 'all', name: '全部状态' },
        { id: 'active', name: '正常' },
        { id: 'disabled', name: '禁用' }
      ],
      roleList: [
        { id: 'all', name: '全部角色' },
        { id: 'inspector', name: '巡检员' },
        { id: 'leader', name: '组长' },
        { id: 'supervisor', name: '主管' }
      ],
      selectedStatusIndex: 0,
      selectedStatus: {},
      selectedRoleIndex: 0,
      selectedRole: {},
      searchKeyword: '',
      
      // 组员数据
      memberList: [],
      filteredMembers: [],
      
      // 弹窗相关
      showMemberDetailModal: false,
      selectedMember: null,
      showResetPasswordModal: false,
      resetPasswordMember: null,
      showToggleStatusModal: false,
      toggleStatusMember: null,
      showAddMemberModal: false,
      
      // 新增组员
      newMember: {
        name: '',
        phone: '',
        employeeId: '',
        roleId: '',
        roleName: '',
        email: '',
        workArea: ''
      },
      newMemberRoleIndex: 0
    }
  },
  
  computed: {
    canAddMember() {
      return this.newMember.name && 
             this.newMember.phone && 
             this.newMember.employeeId && 
             this.newMember.roleId
    }
  },
  
  onLoad() {
    this.initData()
  },
  
  methods: {
    // 初始化数据
    async initData() {
      await this.loadMemberData()
      this.updateStats()
      this.filterData()
    },
    
    // 加载组员数据
    async loadMemberData() {
      try {
        // 模拟数据，实际应调用API
        this.memberList = this.generateMockMemberData()
      } catch (error) {
        console.error('加载组员数据失败:', error)
        uni.showToast({
          title: '加载数据失败',
          icon: 'error'
        })
      }
    },
    
    // 生成模拟组员数据
    generateMockMemberData() {
      const members = []
      const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十', '郑十一', '王十二', '陈十三', '刘十四']
      const roles = [
        { id: 'inspector', name: '巡检员' },
        { id: 'leader', name: '组长' },
        { id: 'supervisor', name: '主管' }
      ]
      
      for (let i = 0; i < 12; i++) {
        const role = roles[Math.floor(Math.random() * roles.length)]
        const isActive = Math.random() > 0.2
        const isOnline = isActive && Math.random() > 0.4
        
        members.push({
          id: i + 1,
          name: names[i],
          phone: `138${Math.random().toString().substr(2, 8)}`,
          employeeId: `EMP${(i + 1).toString().padStart(4, '0')}`,
          roleId: role.id,
          roleName: role.name,
          email: `${names[i].toLowerCase()}@company.com`,
          avatar: null,
          status: isActive ? 'active' : 'disabled',
          isOnline: isOnline,
          workArea: `区域${Math.floor(Math.random() * 5) + 1}`,
          currentShift: isActive ? this.generateRandomShift() : null,
          joinDate: this.generateRandomDate(),
          lastLoginTime: isOnline ? this.generateRecentTime() : this.generateRandomTime(),
          createTime: this.generateRandomDate()
        })
      }
      
      return members
    },
    
    // 生成随机班次
    generateRandomShift() {
      const shifts = ['早班 (08:00-16:00)', '中班 (16:00-24:00)', '夜班 (00:00-08:00)']
      return shifts[Math.floor(Math.random() * shifts.length)]
    },
    
    // 生成随机日期
    generateRandomDate() {
      const start = new Date(2023, 0, 1)
      const end = new Date()
      const randomTime = start.getTime() + Math.random() * (end.getTime() - start.getTime())
      return this.formatDate(new Date(randomTime))
    },
    
    // 生成最近时间
    generateRecentTime() {
      const now = new Date()
      const randomMinutes = Math.floor(Math.random() * 1440) // 24小时内
      const time = new Date(now.getTime() - randomMinutes * 60000)
      return this.formatDateTime(time)
    },
    
    // 生成随机时间
    generateRandomTime() {
      const start = new Date(2024, 0, 1)
      const end = new Date()
      const randomTime = start.getTime() + Math.random() * (end.getTime() - start.getTime())
      return this.formatDateTime(new Date(randomTime))
    },
    
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    
    // 格式化日期时间
    formatDateTime(date) {
      const dateStr = this.formatDate(date)
      const hour = date.getHours().toString().padStart(2, '0')
      const minute = date.getMinutes().toString().padStart(2, '0')
      return `${dateStr} ${hour}:${minute}`
    },
    
    // 更新统计数据
    updateStats() {
      const total = this.memberList.length
      const active = this.memberList.filter(m => m.status === 'active').length
      const disabled = this.memberList.filter(m => m.status === 'disabled').length
      const online = this.memberList.filter(m => m.isOnline).length
      
      this.statsData = {
        totalMembers: total,
        activeMembers: active,
        disabledMembers: disabled,
        onlineMembers: online
      }
    },
    
    // 筛选数据
    filterData() {
      let filtered = this.memberList
      
      // 按状态筛选
      if (this.selectedStatus.id && this.selectedStatus.id !== 'all') {
        filtered = filtered.filter(m => m.status === this.selectedStatus.id)
      }
      
      // 按角色筛选
      if (this.selectedRole.id && this.selectedRole.id !== 'all') {
        filtered = filtered.filter(m => m.roleId === this.selectedRole.id)
      }
      
      // 按关键词搜索
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.toLowerCase()
        filtered = filtered.filter(m => 
          m.name.toLowerCase().includes(keyword) ||
          m.phone.includes(keyword) ||
          m.employeeId.toLowerCase().includes(keyword)
        )
      }
      
      this.filteredMembers = filtered
    },
    
    // 状态选择变化
    onStatusChange(e) {
      this.selectedStatusIndex = e.detail.value
      this.selectedStatus = this.statusList[this.selectedStatusIndex]
      this.filterData()
    },
    
    // 角色选择变化
    onRoleChange(e) {
      this.selectedRoleIndex = e.detail.value
      this.selectedRole = this.roleList[this.selectedRoleIndex]
      this.filterData()
    },
    
    // 搜索输入
    onSearchInput() {
      this.filterData()
    },
    
    // 刷新数据
    refreshData() {
      this.initData()
      uni.showToast({
        title: '刷新成功',
        icon: 'success'
      })
    },
    
    // 显示组员详情
    showMemberDetail(member) {
      this.selectedMember = member
      this.showMemberDetailModal = true
    },
    
    // 关闭组员详情
    closeMemberDetail() {
      this.showMemberDetailModal = false
      this.selectedMember = null
    },
    
    // 显示重置密码确认
    showResetPasswordConfirm(member) {
      this.resetPasswordMember = member
      this.showResetPasswordModal = true
    },
    
    // 确认重置密码
    async confirmResetPassword() {
      try {
        // 模拟API调用
        await this.simulateApiCall()
        
        uni.showToast({
          title: '密码重置成功',
          icon: 'success'
        })
        
        this.cancelResetPassword()
      } catch (error) {
        console.error('重置密码失败:', error)
        uni.showToast({
          title: '重置密码失败',
          icon: 'error'
        })
      }
    },
    
    // 取消重置密码
    cancelResetPassword() {
      this.showResetPasswordModal = false
      this.resetPasswordMember = null
    },
    
    // 显示切换状态确认
    showToggleStatusConfirm(member) {
      this.toggleStatusMember = member
      this.showToggleStatusModal = true
    },
    
    // 确认切换状态
    async confirmToggleStatus() {
      try {
        // 模拟API调用
        await this.simulateApiCall()
        
        // 更新本地数据
        const member = this.toggleStatusMember
        const newStatus = member.status === 'active' ? 'disabled' : 'active'
        
        // 更新列表中的数据
        const memberInList = this.memberList.find(m => m.id === member.id)
        if (memberInList) {
          memberInList.status = newStatus
          if (newStatus === 'disabled') {
            memberInList.isOnline = false
          }
        }
        
        // 更新选中的组员数据
        if (this.selectedMember && this.selectedMember.id === member.id) {
          this.selectedMember.status = newStatus
          if (newStatus === 'disabled') {
            this.selectedMember.isOnline = false
          }
        }
        
        this.updateStats()
        this.filterData()
        
        uni.showToast({
          title: `${newStatus === 'active' ? '启用' : '禁用'}成功`,
          icon: 'success'
        })
        
        this.cancelToggleStatus()
      } catch (error) {
        console.error('切换状态失败:', error)
        uni.showToast({
          title: '操作失败',
          icon: 'error'
        })
      }
    },
    
    // 取消切换状态
    cancelToggleStatus() {
      this.showToggleStatusModal = false
      this.toggleStatusMember = null
    },
    
    // 显示添加组员
    showAddMember() {
      this.resetNewMember()
      this.showAddMemberModal = true
    },
    
    // 关闭添加组员
    closeAddMember() {
      this.showAddMemberModal = false
      this.resetNewMember()
    },
    
    // 重置新组员数据
    resetNewMember() {
      this.newMember = {
        name: '',
        phone: '',
        employeeId: '',
        roleId: '',
        roleName: '',
        email: '',
        workArea: ''
      }
      this.newMemberRoleIndex = 0
    },
    
    // 新组员角色选择变化
    onNewMemberRoleChange(e) {
      this.newMemberRoleIndex = e.detail.value
      const availableRoles = this.roleList.filter(r => r.id !== 'all')
      const selectedRole = availableRoles[this.newMemberRoleIndex]
      this.newMember.roleId = selectedRole.id
      this.newMember.roleName = selectedRole.name
    },
    
    // 确认添加组员
    async confirmAddMember() {
      try {
        // 验证数据
        if (!this.validateNewMember()) {
          return
        }
        
        // 模拟API调用
        await this.simulateApiCall()
        
        // 添加到列表
        const newId = Math.max(...this.memberList.map(m => m.id)) + 1
        const newMember = {
          id: newId,
          ...this.newMember,
          avatar: null,
          status: 'active',
          isOnline: false,
          currentShift: null,
          joinDate: this.formatDate(new Date()),
          lastLoginTime: null,
          createTime: this.formatDateTime(new Date())
        }
        
        this.memberList.push(newMember)
        this.updateStats()
        this.filterData()
        
        uni.showToast({
          title: '添加成功',
          icon: 'success'
        })
        
        this.closeAddMember()
      } catch (error) {
        console.error('添加组员失败:', error)
        uni.showToast({
          title: '添加失败',
          icon: 'error'
        })
      }
    },
    
    // 验证新组员数据
    validateNewMember() {
      if (!this.newMember.name.trim()) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return false
      }
      
      if (!this.newMember.phone.trim()) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.newMember.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        })
        return false
      }
      
      if (!this.newMember.employeeId.trim()) {
        uni.showToast({
          title: '请输入工号',
          icon: 'none'
        })
        return false
      }
      
      // 检查工号是否重复
      if (this.memberList.some(m => m.employeeId === this.newMember.employeeId)) {
        uni.showToast({
          title: '工号已存在',
          icon: 'none'
        })
        return false
      }
      
      // 检查手机号是否重复
      if (this.memberList.some(m => m.phone === this.newMember.phone)) {
        uni.showToast({
          title: '手机号已存在',
          icon: 'none'
        })
        return false
      }
      
      if (!this.newMember.roleId) {
        uni.showToast({
          title: '请选择角色',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    
    // 获取组员状态样式类
    getMemberStatusClass(status) {
      return {
        'status-active': status === 'active',
        'status-disabled': status === 'disabled'
      }
    },
    
    // 获取组员状态文本
    getMemberStatusText(status) {
      const statusMap = {
        'active': '正常',
        'disabled': '禁用'
      }
      return statusMap[status] || '未知'
    },
    
    // 模拟API调用
    simulateApiCall() {
      return new Promise((resolve) => {
        setTimeout(resolve, 1000)
      })
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.member-management-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.navbar-right {
  width: 60rpx;
  display: flex;
  justify-content: flex-end;
}

/* 图标样式 */
.icon-image {
  width: 48rpx;
  height: 48rpx;
  filter: brightness(0) saturate(100%) invert(20%) sepia(8%) saturate(1000%) hue-rotate(180deg);
}

.icon-image-small {
  width: 32rpx;
  height: 32rpx;
  filter: brightness(0) saturate(100%) invert(60%) sepia(8%) saturate(1000%) hue-rotate(180deg);
}

.icon-image-medium {
  width: 40rpx;
  height: 40rpx;
  filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(1000%) hue-rotate(180deg);
}

/* 统计数据区域 */
.stats-section {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.stat-item {
  text-align: center;
  padding: 30rpx 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.stat-value {
  display: block;
  font-size: 48rpx;
  font-weight: 600;
  color: #2c5aa0;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

/* 筛选区域 */
.filter-section {
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.filter-row {
  display: flex;
  gap: 30rpx;
  margin-bottom: 30rpx;
}

.filter-item {
  flex: 1;
}

.filter-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.picker-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  border: 1px solid #ddd;
}

.search-row {
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.search-input {
  flex: 0 0 500rpx;
}

.search-input :deep(.u-input) {
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8rpx;
}

.refresh-btn {
  padding: 20rpx;
  background-color: #2c5aa0;
  border: none;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refresh-btn .icon-image-medium {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* 内容区域 */
.content-section {
  flex: 1;
  padding: 0 30rpx;
}

.content-scroll {
  height: calc(100vh - 400rpx);
}

/* 组员列表样式 */
.member-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.member-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.member-item:last-child {
  border-bottom: none;
}

.member-item:active {
  background-color: #f8f9fa;
}

.member-avatar {
  position: relative;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 24rpx;
  background-color: #f0f0f0;
}

.member-avatar image {
  width: 100%;
  height: 100%;
}

.online-status {
  position: absolute;
  bottom: 4rpx;
  right: 4rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #dc3545;
  border: 2px solid #fff;
}

.online-status.online {
  background-color: #28a745;
}

.online-status.large {
  width: 24rpx;
  height: 24rpx;
  bottom: 8rpx;
  right: 8rpx;
}

.member-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.member-info {
  flex: 1;
  margin-right: 0;
}

.member-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.member-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.member-details {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 8rpx;
}

.member-role {
  font-size: 24rpx;
  color: #666;
}

.member-phone {
  font-size: 24rpx;
  color: #999;
}

.member-extra {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.member-id,
.member-join-date {
  font-size: 22rpx;
  color: #999;
}

.status-badge {
  display: inline-block;
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.status-active {
  background-color: #d4edda;
  color: #155724;
}

.status-disabled {
  background-color: #f8d7da;
  color: #721c24;
}

.member-actions {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin-top: 20rpx;
  width: 100%;
}

.member-actions .action-btn {
  width: 100%;
  padding: 16rpx 0;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 16rpx;
  border: none;
  border-radius: 6rpx;
  font-size: 22rpx;
  transition: all 0.3s ease;
}

.reset-btn {
  background-color: #2c5aa0;
  color: #fff;
}

.reset-btn:disabled {
  background-color: #ccc;
  color: #999;
}

.toggle-btn {
  background-color: #28a745;
  color: #fff;
}

.toggle-btn.disable {
  background-color: #dc3545;
}

.action-btn .icon-image-small {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 100rpx 40rpx;
}

.empty-icon {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 30rpx;
  filter: brightness(0) saturate(100%) invert(80%);
}

.empty-text {
  display: block;
  font-size: 32rpx;
  color: #666;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 24rpx;
  color: #999;
}

/* 组员详情弹窗 */
.member-detail {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 70vh;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.detail-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.member-profile {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.profile-avatar {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30rpx;
  background-color: #e9ecef;
}

.profile-avatar image {
  width: 100%;
  height: 100%;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
  display: block;
}

.profile-role {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 12rpx;
  display: block;
}

.detail-sections {
  space-y: 30rpx;
}

.detail-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  width: 200rpx;
  font-size: 28rpx;
  color: #666;
  flex-shrink: 0;
}

.detail-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: right;
}

.detail-value.online {
  color: #28a745;
}

.detail-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
  padding-top: 30rpx;
  border-top: 1px solid #eee;
}

.detail-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 24rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.detail-action-btn.reset-btn {
  background-color: #17a2b8;
  color: #fff;
}

.detail-action-btn.reset-btn:disabled {
  background-color: #ccc;
  color: #999;
}

.detail-action-btn.toggle-btn {
  background-color: #28a745;
  color: #fff;
}

.detail-action-btn.toggle-btn.disable {
  background-color: #dc3545;
}

.detail-action-btn .icon-image-small {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* 弹窗内容 */
.modal-content {
  padding: 20rpx 0;
  text-align: center;
}

.modal-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.modal-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.highlight {
  color: #2c5aa0;
  font-weight: 600;
}

/* 添加组员弹窗 */
.add-member {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
  overflow-y: auto;
}

.add-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.add-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.add-form {
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
  display: block;
}

.form-input {
  width: 100%;
  padding: 24rpx;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.form-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.add-actions {
  display: flex;
  gap: 20rpx;
}

.add-cancel-btn,
.add-confirm-btn {
  flex: 1;
  padding: 24rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: 500;
}

.add-cancel-btn {
  background-color: #f8f9fa;
  color: #666;
  border: 1px solid #ddd;
}

.add-confirm-btn {
  background-color: #2c5aa0;
  color: #fff;
}

.add-confirm-btn:disabled {
  background-color: #ccc;
  color: #999;
}
</style>